<template>
    <div class="actorList">
        <i class="el-icon-error" @click="del"></i>
        <img  :src="avatar" alt="">
        <div class="actorName">{{ name }}</div>
    </div>
</template>

<script>
    export default {
        props:{
            avatar:{
                required:true,
                type:String
            },
            name:{
                required:true,
                type:String
            },
        },
        methods: {
            del() {
                // 用户点击叉子，自己处理不了 抛出给父组件
                this.$emit('deletePersion')  //子组件的自定义方法
            }
        },
    }
</script>

<style lang="scss" scoped>
    .actorList{
        height: 160px;
        margin: 15px 10px;
        display: inline-block;
        position: relative;
        .actorName{
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
        }
        img{
            width: 100px;
            display: flex;
        }
        .el-icon-error{
            position:absolute;
            right: -5px;
            top:-5px;
            font-size: 1.1em;
            display: none;
           color:red;
        }
        &:hover i {
            display: block;
        }
    }
</style>